.wpmd {
	display: block;
    margin-top: 10px;

	input[type=checkbox] {
		display: none !important;
		&:before {
			display: none !important;
		}
    }

	label {
		cursor: pointer;
		text-indent: -9999px;
		width: 50px;
		height: 25px;
		background: grey;
		display: inline-block;
		border-radius: 25px;
		position: relative;
		&:after {
			content: '';
			position: absolute;
			top: 1px;
			left: 2px;
			width: 23px;
			height: 23px;
			background: #fff;
			border-radius: 11px;
			transition: 0.3s;
		}
	}
	input:checked + label {
		background: #0073aa;
		&:after {
			left: calc(100% - 2px);
			transform: translateX(-100%);
		}
	}
	label:active:after {
		width: 40px;
	}

	&.sm {
		margin-top: 3px;
		label {
			width: 44px;
			height: 22px;
			background: grey;
			display: inline-block;
			border-radius: 22px;
			
			&:after {
				top: 1px;
				left: 2px;
				width: 20px;
				height: 20px;
				border-radius: 11px;
			}
		}
		input:checked + label {
			background: #0073aa;
			&:after {
				left: calc(100% - 2px);
				transform: translateX(-100%);
			}
		}
		label:active:after {
			width: 30px;
		}
	}
}

.plugins_page_githuber-md, .plugins_page_wp-githuber-md {
	.metabox-holder {
		padding: 10px 20px 20px 20px;
	}
}

.wrap div.updated {
	margin: 0;
	margin-top: 15px;
}

.g-tab-title {
	display: block;
	overflow: hidden;
	font-size: 1.5rem;
	padding-bottom: 15px;
}

form {

	.g-section-title {
		position: relative;
		display: block;
		font-size: 1.2rem;
		border-bottom: 1px solid #ccc;
		padding-bottom: 10px;

		.setting-toggle {
			position: absolute;
			display: inline-block !important;
			right: 15px;
			top: -15px;
		}
	}
	
	.g-section-title-desc {
		font-size: 13px;
		margin: 0px 5px;
		padding: 3px 6px;
		color: #aaaaaa;
		border-radius: 3px;
	}

	.g-section-desc {
		display: block;
	}
}

pre.setting-example {
	background-color: #ffffff;
	border: 0 !important;
	padding: 10px !important;
	border-radius: 3px;
	

	code {
		background-color: #ffffff;
		margin: 0;
		padding: 0;
	}
}

.example-tag {
	border: 1px #dddddd solid;
	padding: 2px 5px;
	margin: 3px;
	border-radius: 2px;
	color: #0073aa;
	background-color: #ffffff;
}

/*
.nav-tab-active, .metabox-holder {
	background-color: #ffffff;
}

.nav-tab-active {
	border-bottom: 1px solid #ffffff;
}
*/

.CodeMirror {
	.cm-spell-error:not(.cm-url):not(.cm-comment):not(.cm-tag):not(.cm-word):not(.cm-tag):not(.cm-property):not(.cm-variable):not(.cm-variable-2):not(.cm-string):not(.cm-link):not(.cm-def):not(.cm-atom):not(.cm-operator) {
		background-image: url();
		background-position: bottom left;
		background-repeat: repeat-x;
	}
}

.bg-icon-md {
	background-image: url('');
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: cover;
	width: 29px;
	height: 14px;
	float: right;
	margin-top: 4px;
}

.p-r {
	position: relative;
}

.githuber-md-keyword {
	padding: 3px 6px;
	border: 1px #dddddd solid;
	margin: 3px;
	font-size: 12px;
	display: inline-block;
	word-wrap: break-word;
	background-color: #f6f6f6;
	border-radius: 2px;
	cursor: pointer;

	&:hover {
		background-color: #0073aa;
		color: #ffffff;
		border: 1px rgb(115, 80, 199) solid;
	}
}

.metabox-prefs {
	.bg-icon-md {
		display: none;
	}
}

.githuber-md-info-bar {
	clear: both;
	margin-top: 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;

	.version-info {
		margin-right: 20px;
		padding: 10px;
		font-size: 12px;
		background-color: rgba(255, 255, 255, 0);
	}

	.githuber-md-logo {
		height: 60px;
	}

	a {
		text-decoration: none;
		padding: 3px 5px;
		border: 1px #dddddd solid;
		margin-right: 10px;
		border-radius: 2px;
		background-color: #f4f5f5;
	}
}